<!DOCTYPE html>
<html layout:decorate="~{layout/master}" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>

</head>
<body>
<div layout:fragment="content">
    <i-form ref="myForm" :model="form" :rules="ruleValidate" :label-width="100">
        <Form-item label="唯一编码" prop="paramKey">
            <i-input v-model="form.paramKey" placeholder="请输入"></i-input>
        </Form-item>
        <Form-item label="名称" prop="name">
            <i-input v-model="form.name" placeholder="请输入"></i-input>
        </Form-item>
        <Form-item label="数据类型" prop="dataType">
            <i-select v-model="form.dataType" placeholder="请选择">
                <i-option value="text">文本</i-option>
                <i-option value="combobox">下拉列表</i-option>
                <i-option value="tree">树结构</i-option>
            </i-select>
        </Form-item>
        <Form-item label="备注">
            <i-input v-model="form.remark" type="textarea" :rows="4" placeholder="请输入"></i-input>
        </Form-item>
    </i-form>
</div>

<script layout:fragment="script">
    const m_apis = {
        getModel(p_id) {
            return PB.apiRoute('/api/sys/param/getModel?id=' + p_id, 'GET');
        },
        saveTopData(p_body) {
            return PB.apiRoute('/api/sys/param/saveTopData', 'POST', p_body);
        }
    };
    let vm = new Vue({
        el: '#app',
        data() {
            return {
                apis: m_apis,
                unitData: [],
                productTypeData: [],
                form: {
                    children: []
                },
                ruleValidate: {
                    paramKey: [
                        {required: true, message: '唯一编码不能为空', trigger: 'blur'}
                    ],
                    name: [
                        {required: true, message: '名称不能为空', trigger: 'blur'}
                    ],
                    dataType: [
                        {required: true, message: '数据类型不能为空', trigger: 'change'}
                    ]
                }
            }
        },
        created(){
            if (PB.getPara('id')) {
                this.getModel(PB.getPara('id'));
            }
        },
        methods: {
            getModel(id){
                let that = this;
                PB.ajax(this.apis.getModel(id), function (d) {
                    that.form = d.data;
                    that.form.children = []; // 避免传了个null给后台转换不过去
                });
            },
            save () {
                this.$refs['myForm'].validate((valid) => {
                    if (valid) {
                        PB.ajax(this.apis.saveTopData(this.form), {isInFramePage: true}, function (d) {
                            PB.formPageSaveOK(d);
                        });
                    } else {
                        PB.alert('表单验证失败!');
                        PB.formPageSaveError();
                    }
                })
            }
        }
    });

    function save() {
        vm.save();
    }
</script>
</body>
</html>
